<!DOCTYPE html>
<html lang="zh-cmn-hans">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <title>csslib</title>
    <link rel="stylesheet" type="text/css" href="./dist/index.min.css">
</head>

<body style="text-align: center;padding: 40px;">

    <p><span class="tooltips-top tooltips-primary" data-tooltips="data-tooltips">tooltips top primary</span></p>
    <p><span class="tooltips-right tooltips-secondary" data-tooltips="data-tooltips">tooltips right secondary</span></p>
    <p><span class="tooltips-left tooltips-success" data-tooltips="data-tooltips">tooltips left success</span></p>
    <p><span class="tooltips-bottom tooltips-warning" data-tooltips="data-tooltips">tooltips bottom warning</span></p>

    <p>
        按钮：<input type="checkbox" class="switch" />
    </p>

    <div class="grid show-grid">
        <div class="grid-1">1</div>
        <div class="grid-11">11</div>
        <div class="grid-2">2</div>
        <div class="grid-10">10</div>
        <div class="grid-3">3</div>
        <div class="grid-9">9</div>
        <div class="grid-4">4</div>
        <div class="grid-8">8</div>
        <div class="grid-5">5</div>
        <div class="grid-7">7</div>
        <div class="grid-6">6</div>
        <div class="grid-6">6</div>
        <div class="grid-12">12</div>
    </div>

    <div>
        <a href="#" class="btn-style-1">Style 1</a>
        <a href="#" class="btn-style-2">Style 2<span></span></a>
        <a href="#" class="btn-style-3">Style 3</a>
        <a href="#" class="btn-style-4">Style 4 <span></span></a>
        <a href="#" class="btn-style-5">Style 5 <span></span></a>
        <a href="#" class="btn-style-6">Style 6 <span></span></a>
        <a href="#" class="btn-style-7">Style 7</a>
    </div>

</body>

<script type="text/javascript">
    //DOM ready 
    function domReady(fn) {
        document.onreadystatechange = function() {
            if (document.readyState === "complete") {
                document.onreadystatechange = null;
                fn.call();
            }
        }
    }

    domReady(function() {
        var style2 = document.querySelector(".btn-style-2");
        style2.addEventListener("mouseenter", style2fn, false);
        style2.addEventListener("mouseout", style2fn, false);
    })

    function style2fn(e) {
        var x = e.layerX,
            y = e.layerY,
            span = e.currentTarget.querySelector("span");
        span.style.left = x + "px";
        span.style.top = y + "px";
    }
</script>

</html>